<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
    $(document).ready(function () {
        var fm = ["lockPhyCellForm", "child_container", "lockPhyCellFormId"];
        Page.createForm(fm);
        TempUtil.render('child_template', 'lockPhyCellForm', DOC);

        var $btnSave = $('#btnSave').disable(),
            $locks = $('.lock').hide(),
            $spanLockedStatus = $('#spanLockedStatus'),
            $lockTypes = $('input[name=lockType]').disable();

        var lockType = 0;
        var lockedStatus = -1;
        var currentFreqPoint = "", currentPhyCellId = "";
        var lockedFreqPoint = "", lockedPhyCellId = "";

        $lockTypes.change(function () {
            if (this.value == 2) {
                $locks.show();
            } else {
                $locks.hide();
            }

            if (this.value == "1") {
                $(".pciEarfcn").show();
            } else {
                $(".pciEarfcn").hide();
            }
        });


        function showInfo() {
            if (lockedStatus == 1) {
                $spanLockedStatus.html(DOC.status.unlocked);
            } else if (lockedStatus == 2) {
                $spanLockedStatus.html(DOC.status.locked);
                if (lockType == 2) {
                    Page.setFormFieldValue2("txtFreqPoint", lockedFreqPoint);
                    Page.setFormFieldValue2("txtPhyCellId", lockedPhyCellId);
                    $locks.show();
                }
            } else {
                $spanLockedStatus.html(DOC.lbl.noSim);
            }
            InputUtil.setRadiosSelectedValue($lockTypes, lockType);
            $('#lockType').attr('old', lockType);
        }

        function getInfo() {
            Page.postJSON({
                json: {
                    cmd: RequestCmd.LOCK_ONE_CELL
                },
                success: function (datas) {
                    if (datas.modem != '') {
                        lockedStatus = 1;
                        currentPhyCellId = datas.modem.pci;
                        currentFreqPoint = datas.modem.earfcn;
                        $("#currentPoint").text(datas.modem.earfcn);
                        $("#currentPhyCellId").text(datas.modem.pci);
                        $btnSave.enable();
                        $lockTypes.enable();
                        if (datas.pci != undefined && datas.pci != '') {
                            lockedStatus = 2;
                            lockedPhyCellId = datas.pci;
                            lockedFreqPoint = datas.earfcn;
                            if (datas.pci == datas.modem.pci) {
                                lockType = 1;
                            } else {
                                lockType = 2;
                            }
                        }

                        if (lockType == "1") {
                            $(".pciEarfcn").show();
                        }
                    }
                },
                complete: function () {
                    showInfo();
                }
            });
        }

        getInfo();

        var rules = {
            txtFreqPoint: { required: true, range: [0, 65535] },
            txtPhyCellId: { required: true, range: [0, 503] }
        },
            messages = {
                txtFreqPoint: { required: CHECK.required.freqPoint, range: CHECK.required.freqPointMax },
                txtPhyCellId: { required: CHECK.required.PhyCellId, range: CHECK.required.PhyCellIdMax }
            };

        $btnSave.click(function () {
            $(this).attr("disabled", true);
            var $form = $('#lockPhyCellForm');
            var json = JSON.parmsToJSON($form);

            if (json.lockType == $("#lockType").attr('old')) {
                if (json.lockType == '2') {
                    if (json.txtFreqPoint == $("#txtFreqPoint").attr('old') && json.txtPhyCellId == $("#txtPhyCellId").attr('old')) {
                        AlertUtil.alertMsg(CHECK.required.noChanges);
                        $(this).attr("disabled", false);
                        return false;
                    }
                } else {
                    AlertUtil.alertMsg(CHECK.required.noChanges);
                    $(this).attr("disabled", false);
                    return false;
                }

            } else {
                if (json.lockType == '1') {
                    json.txtFreqPoint = currentFreqPoint;
                    json.txtPhyCellId = currentPhyCellId;
                } else if (json.lockType == '2') {
                    if (!CheckUtil.checkForm($form, rules, messages)) {
                        $(this).attr("disabled", false);
                        return false;
                    }
                } else if (json.lockType == '0') {
                    json.txtFreqPoint = '';
                    json.txtPhyCellId = '';
                }
            }

            delete json["lockType"];
            json.method = JSONMethod.POST;
            json.cmd = RequestCmd.LOCK_PHY_CELL;
            Page.postJSON({
                json: json,
                success: function (data) {
                    AlertUtil.alertMsg(PROMPT.saving.success);
                    // $("ul.tabs a").eq(3).click();
                },
                complete: function () {
                    $('#btnSave').attr("disabled", false);
                }
            });

        });

        Page.setStripeTable();

    });
</script>

<div class="tab_box" id="child_container">
    <div id="lockPhyCellFormId">
        <script type="text/template" id="child_template">
            <!-- <form id="lockPhyCellForm"> -->
            <table id="lockPhyCellTable" class="detail" cellspacing="0">
                <tr>
                    <th><%- lbl.lockedStatus %><%- colon %></th>
                    <td><span id="spanLockedStatus"></span></td>
                </tr>
                <tr>
                    <th><%- lbl.lockTh %><%- colon %></th>
                    <td>
                        <label id="lockType">
                            <input type="radio" name="lockType" value="0" /><%- lbl.unlock %>&nbsp;&nbsp;
                            <input type="radio" name="lockType" value="1" /><%- lbl.lockCurrent %>&nbsp;&nbsp;
                            <input type="radio" name="lockType" value="2" /><%- lbl.lockSpecific %>&nbsp;&nbsp;
                        </label>
                    </td>
                </tr>

                <tr class="pciEarfcn" style="display:none;">
                    <th><%- lbl.freqPoint %><%- colon %></th>
                    <td><span id="currentPoint"></span></td>
                </tr>
                <tr class="pciEarfcn" style="display:none;">
                    <th><%- lbl.phyCellId %><%- colon %></th>
                    <td><span id="currentPhyCellId"></span></td>
                </tr>

                <tr class="lock">
                    <th><%- lbl.freqPoint %><%- colon %></th>
                    <td><input type="text" id="txtFreqPoint" name="txtFreqPoint" /></td>
                    <tr class="lock">
                        <th>&nbsp;</th>
                        <td><%- DOC.lbl.lockFreqPointTip %><b><%- DOC.lbl.lockFreqPointTipRange %></b></td>
                    </tr>
                </tr>
                <tr class="lock">
                    <th><%- lbl.phyCellId %><%- colon %></th>
                    <td><input type="text" id="txtPhyCellId" name="txtPhyCellId" /></td>
                    <tr class="lock">
                        <th>&nbsp;</th>
                        <td><%- DOC.lbl.lockPhyCellIdTip %><b><%- DOC.lbl.lockPhyCellIdTipRange %></b></td>
                    </tr>
                </tr>
                <tr id="trSave">
                    <th>&nbsp;</th>
                    <td>
                        <input type="button" id="btnSave" value="<%= DOC.lbl.btnSave %>"/>
                    </td>
                </tr>
            </table>                             
            <!-- </form> -->
        </script>
    </div>
</div>